<template>
	<div>
		<h1>明细</h1>
		<el-row style="background-color: white;">
			<el-col :span="6">
				<p>单价</p>
				<p>面积</p>
				<p>总价</p>
			</el-col>
			<el-col :span="18" style="text-align: right;">
				<p>￥{{house.price}}元/㎡</p>
				<p>{{house.area}}㎡</p>
				<p>￥{{count}}元/㎡</p>
			</el-col>
		</el-row>
		<div class="box-result">
			<p>应付<span>￥{{count}}元/㎡</span></p>
		</div>
		<el-button @click="buyHouse">有意购买</el-button>
	</div>
</template>

<script>
	import {
		createOrder
	} from '@/api/order'
	export default {
		props: {
			"house": {
				type: Object
			}
		},
		data() {
			return {}
		},
		computed: {
			count() {
				return this.house.area * this.house.price
			}
		},
		methods: {
			buyHouse() {
				if(this.house.salerId == this.$store.getters.info.id){
					this.$message({
						type: 'warning',
						message:'不能购买自己发布的房子'
					})
					return false
				}
				createOrder(this.house.id, this.house.salerId, this.$store.getters.info.id, this.house.adminId)
					.then(res => {
						console.log(res)
						if (res.code === 1) {
							this.$message(res.msg)
						}
					})
			}
		}
	}
</script>

<style scoped>
	.box-result {
		margin: 15px 0;
		text-align: left;
		margin-bottom: 30px;
	}

	.box-result span {
		margin-left: 140px;
	}

	.el-row {
		height: 150px;
		padding: 15px;
	}

	.el-row p {
		margin: 13px 0;
	}

	p {
		margin: 0;
		padding: 0;
	}

	h1 {
		text-align: left;
	}
</style>
